<template>
	<view class="Baoview">
		<view class="hone">
		<image class="bg" src="/static/bg.png" mode="" />
		<view class="honeitem">
			<view class="htui">
				推荐达人商单协作平台
			</view>
		</view>
	</view>
	<image class="xianicon" src="/static/xian.png" mode="" />
	<view class="daone">
		<text class="daname">{{baotitle}}</text>
		<text class="damiao">{{baisub}}</text>
		<view class="daoitem">
			<view class="items">
				<image class="boicon" src="/static/boicon.png" mode="" />
				<text>直播</text>
			</view>
			<view class="items iactive">
				<image class="boicon" src="/static/btwo.png" mode="" />
				<text>探店</text>
			</view>
			<view class="items">
				<image class="boicon" src="/static/yunjian.png" mode="" />
				<text>云剪</text>
			</view>
		</view>
		<view class="shangdan">
			<view class="shangbtn" @click="getbtn">{{btntitle}}</view>
			<text class="youname" v-if="btnmiao">{{btnmiao}}</text>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		props: {
			baotitle:{
				type: String,
				default:''
			},
			lei:{
				type: String,
				default:''
			},
			baisub:{
				type: String,
				default:''
			},
			btntitle:{
				type: String,
				default:''
			},
			btnmiao:{
				type: String,
				default:''
			}
		},
		mounted() {
		},
		methods: {
			getbtn(){
				this.$emit('getbtn')
			}
		}
	}
</script>

<style scoped lang="scss">
.Baoview{
	.hone{
		margin:30rpx 0rpx;
		height: 180rpx;
		opacity: 1;
		border-radius: 24rpx;
		position: relative;
		.bg{
			position: absolute;
			width: 100%;
			height: 100%;
			border-radius: 24rpx;
		}
		.honeitem{
			position: relative;
			height: 100%;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			.htui{
				width: 188px;
				height: 36px;
				opacity: 1;
				border-radius: 50px;
				background: rgba(255, 255, 255, 0.63);
				box-shadow: 0px 6px 10px  rgba(119, 102, 231, 0.08);
				font-size: 14px;
				font-weight: 400;
				color: rgba(1, 117, 255, 1);
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 7%;

			}
		}
	}
	.xianicon{
		margin: 0px auto;
		width: 92%;
		height: 1px;
		display: block;
	}
	.daone{
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 40rpx 0;
		padding: 0 0rpx;
		.daname{
			font-size: 65rpx;
			font-weight: 500;
			color: rgba(51, 51, 51, 1);
		}
		.damiao{
			font-size: 30rpx;
			font-weight: 400;
			color: rgba(153, 153, 153, 1);
			display: block;
			margin: 10rpx 0;
		}
		.daoitem{
			display: flex;
			flex-direction: row;
			margin-top: 20px;
			justify-content: space-between;
			width: 100%;
			margin-bottom: 30px;
			.items{
				width: 31%;
				height: 210rpx;
				opacity: 1;
				border-radius: 12px;
				background: rgba(255, 255, 255, 1);
				box-shadow: 0px 6px 10px  rgba(119, 102, 231, 0.08);
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				text{
					font-size: 14px;
					font-weight: 400;
					color: rgba(51, 51, 51, 1);
					display: block;
					margin-top: 10rpx;
				}
				.boicon{
					width: 36px;
					height: 36px;
				}
			}
			.iactive{
				border: 4rpx solid rgba(119, 102, 231, 1);
				box-shadow: 0rpx 0rpx 12rpx  rgba(119, 102, 231, 0.36);
			}
		}
		.shangdan{
			width: 540rpx;
			height: 100rpx;
			opacity: 1;
			border-radius: 50px;
			position: relative;
			background: linear-gradient(90deg, rgba(119, 102, 231, 1) 0%, rgba(121, 72, 234, 1) 100%);
			box-shadow: 0px 0px 3px  rgba(119, 102, 231, 0.63);
			margin-bottom: 20px;
			.shangbtn{
				position: relative;
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 18px;
				font-weight: 700;
				color: rgba(255, 255, 255, 1);
			}
			.mianfei{
				width: 50px;
				height: 21px;
				border-radius: 3px;
				background: rgba(255, 255, 255, 1);
				box-shadow: 0px 0px 3px  rgba(119, 102, 231, 0.63);
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 10px;
				font-weight: 400;
				color: rgba(119, 102, 231, 1);
				position: absolute;
				right: 0;
				top: -6px;
			}
		}
		.shangdantwo{
			background: rgba(255, 255, 255, 1);
			box-shadow: 0px 0px 3px  rgba(119, 102, 231, 0.63);
			.shangbtn{
				color: rgba(119, 102, 231, 1);
			}
			.mianfei{
				background: rgba(119, 102, 231, 1);
				color: #fff;
				box-shadow: 0px 0px 3px  rgba(119, 102, 231, 0.63);
			}
		}
		.youname{
			font-size: 14px;
			font-weight: 400;
			color: rgba(153, 153, 153, 1);
			display: block;
			text-align: center;
			margin-top: 10px;
		}
	}
}
	
</style>
